<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>CRM</title>
    <link href="img/loginlogo.jpg" rel="icon" type="image/jpg">
    <script src="./js/crypto-js_4.0.0.js"></script>
    <script>
        // 清除cookie的函数
        function clearCookie(name) {
            var date = new Date();
            date.setTime(date.getTime() - 1000); // 设置为过去的时间，强制过期
            document.cookie = name + "=;expires=" + date.toUTCString() + ";path=/";
        }

        function setCookieForever(name, value) {
            var date = new Date();
            date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 设置为一年后过期
            document.cookie = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
        }

        function getCookie(name) {
            let cookies = document.cookie.split('; ');
            for (let i = 0; i < cookies.length; i++) {
                let parts = cookies[i].split('=');
                if (parts[0] === name) {
                    return parts[1];
                }
            }
            return '';
        }

        function printCookie(name) {
            return getCookie(name);
        }

        function login() {
            addMask();
            document.getElementById('loader').classList.add('active');
            document.getElementById('loginbutton').style.pointerEvents = 'none';

            const login_name = document.getElementById("login_name").value;
            const login_pwd = document.getElementById("login_pwd").value;

            if (login_name === "" || login_pwd === "") {
                document.getElementById("error").innerHTML = "请维护用户名、密码";
                removeMask();
                document.getElementById('loader').classList.remove('active');
                document.getElementById('loginbutton').style.pointerEvents = 'auto';
                return;
            }

            const rememberUsername = document.getElementById("rememberUsername").checked;
            if (rememberUsername) {
                // 只保存用户名cookie
                setCookieForever("username", login_name);
                setCookieForever("rememberUsername", rememberUsername);
            } else {
                // 未勾选时清除用户名cookie
                clearCookie("username");
                clearCookie("rememberUsername");
            }
            const formData = new FormData();
            formData.append('login_name', login_name);
            formData.append('login_pwd', CryptoJS.MD5(login_pwd).toString());
            fetch('/crm/login', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
                .then(data => {
                    console.log(data);
                    if (data.result === "false") {
                        document.getElementById("error").innerHTML = data.msg;
                        removeMask();
                        document.getElementById('loader').classList.remove('active');
                        document.getElementById('loginbutton').style.pointerEvents = 'auto';
                    } else {
                        document.getElementById("error").innerHTML = "";
                        window.location.href = data.msg;
                    }
                })
                .catch(error => console.error('Unable to get data.', error));
        }

        // 添加遮罩
        function addMask() {
            var mask = document.getElementById('mask');
            mask.style.display = 'block';
        }

        // 移除遮罩
        function removeMask() {
            var mask = document.getElementById('mask');
            mask.style.display = 'none';
        }

        window.onload = function () {
            // 强制默认不勾选
            document.getElementById("rememberUsername").checked = false;

            var newWindowWidth = window.screen.width;
            var newWindowHeight = window.screen.height;
            document.body.style.width = (newWindowWidth - 10) + "px";
            document.body.style.height = (newWindowHeight - 190) + "px";
            removeMask();

            // 回显用户名（如果已保存）
            if (printCookie('rememberUsername') === "true") {
                document.getElementById("login_name").value = printCookie('username') || '';
                document.getElementById("rememberUsername").checked = true;
            }

            // 绑定回车登录
            document.addEventListener('keydown', function (event) {
                if (event.key === "Enter") {
                    login();
                }
            });

            // 额外的防自动填充措施
            setTimeout(() => {
                document.getElementById('login_pwd').value = '';
            }, 100);
        };
    </script>
    <style>
        /* 原有样式保持不变 */
        .div1, .div2, .div4 {
            width: 100%;
        }

        .topimg {
            padding-left: 40px;
            padding-top: 61px;
        }

        .span1 {
            padding-left: 108px;
        }

        .span2 {
            padding-left: 35px;
        }

        .div3 {
            width: 350px;
            height: 400px;
            background-color: #ffffff;
            margin-right: 14%;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #cbcbcb;
        }

        .zclogo {
            width: 40%;
            margin-top: 15%;
        }

        .login {
            background: #25396a !important;
            border: 1px solid #4176BA;
            width: 240px;
            height: 38px;
            margin-top: 8%;
            cursor: pointer;
            color: #fff;
            font-size: 13pt;
            font-family: "Helvetica Neue Regular", "Helvetica Neue", Helvetica, sans-serif;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
            font-weight: 300;
        }

        .span1, .span2 {
            width: 128px;
            height: 77px;
            font-family: DingTalk JinBuTi, DingTalk JinBuTi;
            font-weight: 400;
            font-size: 64px;
            color: #328ADB;
            line-height: 75px;
            text-shadow: 2px 2px 0px #FFFFFF;
            text-align: left;
            font-style: normal;
        }

        .container {
            width: 100%;
            height: 100%;
            background-image: url('img/background.png');
            background-repeat: repeat;
            background-size: 100% 100%;
        }

        body {
            background-color: #F2F5F6;
        }

        .inputdiv {
            width: 300px;
            margin-left: 25px;
            border-color: #9e9e9e2b;
            height: 45px;
        }

        .inputdiv input {
            height: 30px;
            width: 200px;
        }

        /* 隐藏浏览器自动填充的背景色 */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
            box-shadow: 0 0 0 1000px white inset !important;
        }
    </style>
    <script>
        window.addEventListener('resize', function () {
            document.getElementById("div1").style.width = "100%";
            document.getElementById("div2").style.width = "100%";
        });
    </script>
</head>
<body style="overflow: auto;">
<div id="mask"></div>
<div class="loader" id="loader"></div>
<div class="container">
    <div class="content">
        <div class="div1" id="div1">
            <img class="topimg" src="img/crrc_logo.png"/>
        </div>
        <div class="div4">
            <span style="font-weight: bold;letter-spacing: 3px;margin-left: 64%;color: #d00000;font-size: 64px;">测试环境</span>
        </div>
        <div class="div2" id="div2">
            <div style="float: left;">
                <span class="span1">虔诚</span>
                <span class="span2">实干</span>
                <span class="span2">奋斗</span>
                <span class="span2">创新</span>
            </div>
            <div class="div3" style="float: right;">
                <img class="zclogo" src="img/zclogo.png">
                <div style="margin-top: 10%">
                    <!-- 使用autocomplete和其他属性防止浏览器自动填充密码 -->
                    <div class="inputdiv">
                        <img alt="用户名" height="28" src="img/user188.png" title="用户名" width="28">
                        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="login_name"
                               placeholder="用户名" type="text">
                    </div>
                    <div class="inputdiv">
                        <img alt="密码" height="28" src="img/lock188.png" title="密码" width="28">
                        <input autocapitalize="off" autocomplete="new-password" autocorrect="off" id="login_pwd"
                               onfocus="this.removeAttribute('readonly'); this.type='password'" placeholder="密码"
                               readonly
                               type="password">
                    </div>
                    <div style="text-align: left;margin-left: 84px;">
                        <input id="rememberUsername" name="rememberUsername" type="checkbox">
                        <label>记住账号</label>
                    </div>
                    <button class="login" id="loginbutton" onclick="login()"> 登录</button>
                    <div id="error" style="color:red;margin-top: 8%"></div>
                    <div style="color:red;margin-top: 8%">非涉密系统，严禁处理国家秘密（标注秘密、机密、绝密的文件资料）
                    </div>
                </div>
            </div>
        </div>
        <div class="div4" id="div4" style="float: left;text-align: center;padding-top: 5%;">
            <span style="font-weight: bold;letter-spacing: 3px;">销售管理数字化平台</span>
        </div>
    </div>
</div>
</body>
</html>
